<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作 
		append()    功能：在匹配元素集合中的所有元素的内部末尾插入内容
		prepend()   功能：在匹配元素集合中的所有元素的内部开头插入内容
		
		after()     功能：在匹配元素集合中的所有元素的外部后面插入内容
		before()    功能：在匹配元素集合中的所有元素的外部前面插入内容
		
		remove()    功能：移除匹配元素集合中所有元素和子元素【盒子模型的都删掉】
		empty()     功能：清空匹配元素集合中的内容【盒子模型不删掉】
		
		replaceWith()-->
		<style>
			button{
			    margin: 5px;
			    padding: 10px 15px;
			    cursor: pointer;
			  }
			body{
				margin: 20px;
			  }
			#target{
				border: 1px solid #1e1e2e;
				margin-left: 5px;
				padding: 10px;
				margin-top: 10px;
				bo rder-left: 10px;
				border-radius: 5px;
			}
			.boss{
				background-color: #f8ff66;
				background-image: url(../img/1.gif);
				width: 300px;
				height: 300px;
				border-radius: 50%;
				display: block;
				color: transparent;
				background-size: 100% 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html：7个按钮  div包含p包含：目标元素的初始段落 id="target"
		                   div包含p包含：插入新元素的初始段落 id="newElement" 隐藏
			 css：按钮：外边距5px，内边距：10px  15px 鼠标移动上去：手指显示
							body:外边距20px
							#target：1像素边框、内边距：10px、上边距：10px
			 引入JQ				-->
	    <button id="appendBtn">内部末尾插入元素</button>
		<button id="prependbtn">内部开头插入元素</button>
		<button id="afterbtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removebtn">删除元素</button>
		<button id="emptybtn">清空元素</button>
		<button id="replacebtn">替换元素</button>
		<div id="target">
			<p>目标元素的初始段落 </p>
		</div>
		<div id="newElement" style="display: none;">
			<p>插入新元素的初始段落</p>
		</div>
		<script>
			/* 1.点击 内部末尾插入元素 按钮  p文本后面追加新元素中包含内容操作*/
			$("#appendBtn").click(function(){
				//效果：点击按钮  追加“新元素--自带内容”
				//1.1 追加的内容是新元素--克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			    //1.2自带的属性和属性值：隐藏--改成显示
				cpe.css("display","block");
				//1.3将复制出来的新元素，追加给当前的元素上
				$("#target").append(cpe);
			});
			/* 2.点击 内部末尾插入元素 按钮  p文本后面追加新元素中包含内容操作*/
			$("#prependbtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css("display","block");
				$("#target").prepend(cpe);
			});
		    /* 3.点击 外部后面插入元素 按钮  p文本后面追加新元素中包含内容操作*/
		    /* $("#afterbtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css("display","block");
				$("#target").after(cpe);
			}); */
			/* 4.点击 外部前面插入元素 按钮  生成 原型，保留背景色，文本不需要，背景图300*300*/
		      $("#beforeBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css({"background-color":"#ffe1f9",
					     "background-image":"url(../img/2.gif)",
						 "width":"300px",
						 "height":"300px",
						 "border-radius":"50%",
						 "backgound-size":"100% 100%",
						 "color":"transparent",
						 "display":"block"
				     });
				$("#target").before(cpe);
			}); 
			 $("#afterbtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.addClass("boss");
				$("#target").after(cpe);
			});	
			
			/* 5.点击 删除元素 按钮  页面上所有元素包括子元素全部删除【盒子模型删】 */
		    $("#removebtn").click(function(){
				$("#target").remove();
			});
			/* 6.点击 清空元素 按钮 页面上所有元素中内容全部删除【盒子模型不删除】 */
            $("#emptybtn").click(function(){
            	$("#target").empty();
            });	
			/* 7.点击 替换元素 按钮 页面上目标元素替换为新元素 */
			$("#replacebtn").click(function(){
				 //克隆：新元素 #newElement【父子集】
				var c=$("#newElement").clone().css("display","block");
				//替换  找到目标元素 替换 新元素
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>